<template>
	<div>
		<le-topbar title="注册">
			<a href="#/login">登录</a>
		</le-topbar>

		<div style="margin: 20px;">
		    <mu-text-field label="手机号码" v-model="mobile" labelFloat icon="phone"/>
		    <mu-text-field hintText="验证码" v-model="verificationCode" icon="none" style="width: 150px;" />
		    <button class="my-btn green ml_10"  @click="getVerificationCode($event)">点击获取验证码</button>
		    <mu-text-field label="输入密码" v-model="password1" labelFloat type="password" icon="lock"/>
		    <mu-text-field label="确认密码" v-model="password2" labelFloat type="password" icon="lock"/>
			<div class="mt_20">
				<mu-raised-button @click="register" label="注册" class="raised-button" fullWidth primary style="height: 42px;"/>
			</div>
		</div>

		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import md5 from 'md5'
export default{
	data(){
		return {
			mobile: null,
			verificationCode: null,
			password1: '',
			password2: '',
			alertDialog: {}
		}
	},
	methods: {
		register(){
			let me = this,
				params = {
					mobile: parseInt(this.mobile),
					verificationCode: this.verificationCode,
					passWord: md5(this.password1).toUpperCase()
				};

			switch(true){
				case !this.mobile:
					this.alertDialog = {
						openState: true,
						content: '请输入正确的手机号码！'
					}
					return false;
				case !this.verificationCode:
					this.alertDialog = {
						openState: true,
						content: '请输入验证码！'
					}
					return false;
				case this.password1.length < 6:
					this.alertDialog = {
						openState: true,
						content: '密码长度不得少于6位！'
					}
					return false;
				case this.password1 != this.password2:
					this.alertDialog = {
						openState: true,
						content: '两次密码输入不一致！'
					}
					return false;
				case this.verificationCode != localStorage.verificationCode:
					this.alertDialog = {
						openState: true,
						content: '验证码输入有误！'
					}
					return false;
				default: break;
			}

			axios.post($base + 'login/register', params).then(json => {
				this.$store.state.userInfo = {
					mobile : json.data.mobile,
					userName: json.data.userName
				}
				me.$store.commit('setBottomNav', 'member');

				this.alertDialog = {
					openState: true,
					content: '注册成功，2秒后进入首页！'
				}
				localStorage.mobile = json.data.mobile;
				setTimeout(function() {
					me.$router.push('/member');
				}, 2000);
			}).catch(err => {
				this.alertDialog = {
					openState: true,
					content: 'error！'
				}
			})
		},
		getVerificationCode(e){
			let mobile = parseInt(this.mobile);

			if(!(/^1[3|4|5|7|8]\d{9}$/.test(mobile))){
				this.alertDialog = {
					openState: true,
					content: '请输入正确的手机号码！'
				}
				return false;
			}

			//验证手机号是否被注册
			axios.post($base + 'login/verificationMobile', {
				mobile: mobile
			}).then(json => {
				if(json.data.error){
					this.alertDialog = {
						openState: true,
						content: '该手机号已被注册，请重填！'
					}
				}else{
					//获取验证码
					axios.post($base + 'login/getVerificationCode', {
						mobile: mobile
					}).then(json => {
						if(json.data.code){
							localStorage.verificationCode = json.data.code;
							e.target.classList.add('gray');
							e.target.classList.remove('green');
							e.target.setAttribute('disabled', 'disabled');

							let num = 8,
								timer = setInterval(() => {
									if(num){
										e.target.innerText = num + '秒后重新获取';
										num--;
									}else{
										e.target.classList.add('green');
										e.target.classList.remove('gray');
										e.target.innerText = '点击获取验证码';
										e.target.removeAttribute('disabled');
										clearInterval(timer);
									}	
								}, 1000)
						}else{
							this.alertDialog = {
								openState: true,
								content: '验证码获取失败！请检查手机号'
							}
						}
					}).catch(json => {
						console.log(json)
					})
				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
}
</script>